<template>
  <div>
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="formLabelAlign"
    >
      <el-form-item label="用户名">
        <el-input v-model="formLabelAlign.name"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="formLabelAlign.password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="formLabelAlign.mailbox"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(formLabelAlign)"
          >提交</el-button
        >
        <el-button @click="resetForm(formLabelAlign)">重置</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table :data="info" style="width: 100%">
        <el-table-column fixed prop="name" label="日期" width="150">
        </el-table-column>
        <el-table-column prop="password" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="mailbox" label="省份" width="120">
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, info)"
              type="text"
              size="small"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: "top",
      formLabelAlign: {
        name: "",
        password: "",
        mailbox: "",
      },
      info: [
        {
          name: "jack",
          password: "123456",
          mailbox: "123@126.com",
        },
        {
          name: "rose",
          password: "789456",
          mailbox: "456@126.com",
        },
        {
          name: "tom",
          password: "456321",
          mailbox: "789@126.com",
        },
      ],
    };
  },
  methods: {
    submitForm(formName) {
      this.info.unshift(formName);
      this.formLabelAlign = {
        name: "",
        password: "",
        mailbox: "",
      };
    },
    resetForm() {
      this.formLabelAlign = {
        name: "",
        password: "",
        mailbox: "",
      };
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
  },
};
</script>

<style lang="less" scoped>
</style>